/**
 * 地图UI及交互类
 */
$(document).ready(function() {
  console.log("init map UI");
  mapUI.init();
});

var mapUIHtml =
  "<div id='search-banner' class='mapUI'>" +
  "<div><span class='search-input'><span class='search-input-icon'></span><span><div>请输入目的,起点</div></span></span><span class='search-button'>去首页</span></div>" +
  "</div>" +
  "<div id='search-input' class='mapUI'>" +
  "<div class='search-input-head'>" +
  "<span class='search-input'><span class='search-input-icon'></span><span><input type='search' placeholder='请输入目的,起点'></input></span></span>" +
  "<span class='search-button'>取消</span>" +
  "</div>" +
  "<div class='list-tip'>历史搜索</div>" +
  "<div class='list'>" +
  /*
      "<div class='list-item'><span class='list-item-left'>急诊</span><span class='list-item-right'>6号楼-F1</span></div>"+
      "<div class='list-item'><span class='list-item-left'>急诊</span><span class='list-item-right'>6号楼-F1</span></div>"+
      "<div class='list-item'><span class='list-item-left'>急诊</span><span class='list-item-right'>6号楼-F1</span></div>"+
      */
  "</div>" +
  "<div class='keyword-list'>" +
  /*
      "<div class='list-item'><span class='list-item-left'>急诊1</span><span class='list-item-right'>6号楼-F1</span></div>"+
      "<div class='list-item'><span class='list-item-left'>急诊1</span><span class='list-item-right'>6号楼-F1</span></div>"+
      "<div class='list-item'><span class='list-item-left'>急诊1</span><span class='list-item-right'>6号楼-F1</span></div>"+
      */
  "</div>" +
  "</div>" +
  "<div id='floot-buttom'><span>3F</span></div>" +
  "<div id='compass-buttom'><span class='zhen'></span></div>" +
  "<div id='d2-buttom'><span class='d2-buttom-a'></span></div>" +
  "<div id='d3-buttom'><span class='d3-buttom-b'></span></div>" +
  "<div id='zoom-in-buttom'><span></span></div>" +
  "<div id='zoom-out-buttom'><span></span></div>" +
  "<div id='select-location' class='mapUI' >" +
  "<div class='select-location-fei'></div>" +
  "<div class='select-location-left'><div class='select-location-left-up'>挂号台</div><div class='select-location-left-down'><span class='select-location-left-down-one'>西区</span><span class='select-location-left-down-two'>F1</span></div></div>" +
  "<div class='select-location-right'><div class='select-location-right-up'></div><div class='select-location-right-down'>分享位置</div></div>" +
  "</div>" +
  "<div id='select-nav' class='mapUI' >" +
  "<div class='select-nav-point'>" +
  "<div class='select-nav-point-input'><div class='select-nav-point-input-content'>" +
  "<div class='select-nav-point-input-content-box'>" +
  "<div class='select-nav-point-input-content-box-up'><span class='select-nav-point-input-content-box-left'><div>请输入起点</div></span><span class='select-nav-point-input-content-box-right'>地图选点</span></div>" +
  "<div class='select-nav-point-input-content-box-down'><span class='select-nav-point-input-content-box-left'><div>请输入终点</div></span><span class='select-nav-point-input-content-box-right'>地图选点</span></div>" +
  "</div>" +
  "</div></div>" +
  "<div class='select-nav-point-icon'><div class='select-nav-point-icon-up'></div><div class='select-nav-point-icon-down'></div></div>" +
  "<div class='select-nav-point-switch'></div>" +
  "</div>" +
  "<div class='select-nav-type'>" +
  "<span class='select-nav-type-a'></span><span class='select-nav-type-b'></span><span class='select-nav-type-c'></span>" +
  "</div>" +
  "<div class='select-nav-button'><span class='select-nav-simulator'>模拟导航</span><span class='select-nav-time'>实时导航</span></div>" +
  "</div>" +
  "<div id='select-end-point' class='mapUI'>" +
  "<div class='select-end-point-left'><div class='select-end-point-left-up'><span>目的地:</span><span class='select-end-point-text'>挂号台 6号楼 F1</span></div><div class='select-end-point-left-down'></div></div>" +
  "<div class='select-end-point-right'><div class='select-end-point-button'>退出</div></div>" +
  "</div>" +
  "<div id='nav-tip' class='mapUI'>" +
  "<div class='nav-tip-bg'></div>" +
  "<div class='nav-tip-text'>" +
  "<div class='nav-tip-text-right'>" +
  "<div class='nav-tip-text-right-content'>" +
  "<div class='nav-tip-text-right-content-up'>1米</div>" +
  "<div class='nav-tip-text-right-content-down'>上电梯</div>" +
  "</div>" +
  "</div>" +
  "<div class='nav-tip-text-left zhi'></div>" +
  "</div>" +
  "<div class='nav-tip-over'>" +
  "<div class='nav-tip-over-up'><span class='nav-tip-over-text'>你已到达目的地,导航结束</div>" +
  "<div class='nav-tip-over-down'><span class='nav-tip-over-exit'>退出导航</span><span class='nav-tip-over-colse'>关闭</span></div>" +
  "</div>" +
  "<div class='nav-tip-img'></div>" +
  "</div>" +
  "<div id='nav-dialog-tip' class='mapUI'>" +
  "<div class='nav-bg'></div>" +
  "<div class='nav-dialog'>" +
  "<div class='nav-dialog-bg point'> </div>" +
  "<div class='nav-dialog-text'>将此地点设在为起点</div>" +
  "<div class='nav-dialog-button'><span class='nav-dialog-cancel'>取消</span><span class='nav-dialog-confirm'>确认</span></div>" +
  "</div>" +
  "</div>" +
  "<div id='nav-dialog-err' class='mapUI'>" +
  "<div class='nav-bg'></div>" +
  "<div class='nav-dialog'>" +
  "<div class='nav-dialog-bg point'> </div>" +
  "<div class='nav-dialog-text'>将此地点设在为起点</div>" +
  "<div class='nav-dialog-button'><span class='nav-dialog-cancel'>取消</span><span class='nav-dialog-confirm'>确认</span></div>" +
  "</div>" +
  "</div>";

var tools = {
  getLocalObjStore: function(key) {
    let str = localStorage.getItem(key);
    if (str) {
      return JSON.parse(str);
    } else {
      return null;
    }
  },

  setLocalObjStore: function(key, value) {
    localStorage.setItem(key, JSON.stringify(value));
  },

  queryString: function(item) {
    var svalue = location.search.match(
      new RegExp("[?&]" + item + "=([^&]*)(&?)", "i")
    );
    return svalue ? svalue[1] : svalue;
  }
};

var mapUI = {
  isWx: false,
  isHospitalId: "",
  keywordList: "",
  mapType: "start",
  pointType: "end",
  sceneType: "selectOne",
  navType: "0", //0,1,2,3。 0是不需要 1是电梯，2是扶梯，3是楼梯
  selectStart: "",
  selectEnd: "",
  tempPoint: "",

  init: function() {
    this.getEnvWx();
    this.isHospitalId = tools.queryString("depaid");
    this.createMapUIDiv();
    this.bindEvt();
    this.showHomeScene();
  },

  createMapUIDiv: function() {
    $("body").prepend(mapUIHtml);
  },

  bindEvt: function() {
    var tthis = this;
    //搜索
    $("#search-banner")
      .find(".search-input")
      .click(function() {
        tthis.showSearchScene();
      });

    //回首页
    $("#search-banner")
      .find(".search-button")
      .click(function() {
        window.location.href = "http://hqn.fun:9998";
      });

    //取消
    $("#search-input")
      .find(".search-button")
      .click(function() {
        $("#search-input").hide();
        $("#search-input")
          .find("input")
          .val("");
        $("#search-input")
          .find(".keyword-list")
          .hide();
      });

    //监听输入
    $("#search-input").bind("input propertychange", function() {
      var value = $("#search-input")
          .find("input")
          .val(),
        obj = {
          depaid: tthis.isHospitalId,
          key: value
        };
      if (value) {
        tthis.getKeywordList(obj);
      }
      $("#search-input")
        .find(".keyword-list")
        .show();
    });

    //点击2d
    $("#d2-buttom").click(function() {
      $("#d2-buttom")
        .find("span")
        .removeClass()
        .addClass("d2-buttom-a");
      $("#d3-buttom")
        .find("span")
        .removeClass()
        .addClass("d3-buttom-b");
      call2d();
    });

    //点击3d
    $("#d3-buttom").click(function() {
      $("#d2-buttom")
        .find("span")
        .removeClass()
        .addClass("d2-buttom-b");
      $("#d3-buttom")
        .find("span")
        .removeClass()
        .addClass("d3-buttom-a");
      call3d();
    });

    //放大
    $("#zoom-in-buttom").click(function() {
      zoomOut();
    });

    //放小
    $("#zoom-out-buttom").click(function() {
      zoomIn();
    });

    //分享到小程序
    $("#select-location")
      .find(".select-location-right")
      .click(function() {
        console.log(143, wx);
        if (this.isWx) {
          wx.miniProgram.navigateTo({ url: "/path/to/page" });
        } else {
          alert("当前不是小程序环境,需要跳转到小程序页面进行分享");
        }
      });

    $("#select-location")
      .find(".select-location-fei")
      .click(function() {
        tthis.showSelectTwoScene();
      });

    $("#select-nav")
      .find(".select-nav-point-input-content-box-up")
      .find(".select-nav-point-input-content-box-left")
      .click(function(e) {
        $("#search-input")
          .show()
          .find("input")
          .focus();
        tthis.pointType = "start";
      });

    $("#select-nav")
      .find(".select-nav-point-input-content-box-down")
      .find(".select-nav-point-input-content-box-left")
      .click(function(e) {
        $("#search-input")
          .show()
          .find("input")
          .focus();
        tthis.pointType = "end";
      });

    //点击查询关键字
    $("#search-input")
      .find(".keyword-list")
      .on("click", "div", function(e) {
        var dom = $(e.target),
          index = dom.attr("data-index"),
          obj = tthis.keywordList[index];
        if (tthis.pointType == "end") {
          tthis.selectEnd = obj;
        } else {
          tthis.selectStart = obj;
        }
        console.log("查询关键字", tthis.selectStart, tthis.selectEnd);
        if (tthis.sceneType == "selectOne") {
          tthis.showSelectOneScene();
        } else {
          tthis.showSelectTwoScene();
        }
        //检查导航类型
        tthis.checkoutNavType();
        console.log("查询关键字", tthis.selectStart, tthis.selectEnd);
      });

    //点击历史关键字
    $("#search-input")
      .find(".list")
      .on("click", "div", function(e) {
        console.log("历史关键字", tthis.selectStart, tthis.selectEnd);
        var dom = $(e.target),
          historyList = tthis.getHistoryKeyword();
        (index = dom.attr("data-index")), (obj = historyList[index]);
        if (tthis.pointType == "end") {
          tthis.selectEnd = obj;
        } else {
          tthis.selectStart = obj;
        }
        tthis.showSelectOneScene();
      });

    //选择目的地退出
    $("#select-end-point")
      .find(".select-end-point-button")
      .click(function() {
        tthis.showHomeScene();
      });

    //切换起点与终点
    $("#select-nav")
      .find(".select-nav-point-switch")
      .click(function() {
        tthis.switchStartEnd();
      });

    //模拟导航
    $("#select-nav")
      .find(".select-nav-simulator")
      .click(function() {
        tthis.simulateNav();
      });

    //实时导航
    $("#select-nav")
      .find(".select-nav-time")
      .click(function() {
        tthis.timeNav();
      });

    //起点 地图选点
    $("#select-nav")
      .find(".select-nav-point-input-content-box-up")
      .find(".select-nav-point-input-content-box-right")
      .click(function() {
        //通知地图可以选点
        tthis.mapType = "start";
      });

    //终点 地图选点
    $("#select-nav")
      .find(".select-nav-point-input-content-box-down")
      .find(".select-nav-point-input-content-box-right")
      .click(function() {
        //通知地图可以选点
        tthis.mapType = "end";
      });

    //选点提示取消
    $("#nav-dialog-tip")
      .find(".nav-dialog-cancel")
      .click(function() {
        $("#nav-dialog-tip").hide();
      });

    //选点提示确认
    $("#nav-dialog-tip")
      .find(".nav-dialog-confirm")
      .click(function() {
        $("#nav-dialog-tip").hide();
        manualclick(tthis.tempPoint.point);
        console.log(tthis.tempPoint);
        GetMian(tthis.tempPoint.floorid, tthis.tempPoint.name, function(data) {
          console.log(310, data);
        });
      });
  },

  getEnvWx: function() {
    var tthis = this;
    if (typeof wx == "undefined") {
      wx.miniProgram.getEnv(function(res) {
        tthis.isWx = res.miniprogram;
      });
    }
  },

  checkoutNavType() {
    if (this.selectStart && this.selectEnd) {
      if (this.selectStart.floorid !== this.selectEnd.floorid) {
        $("#select-nav")
          .find(".select-nav-type")
          .show();
        this.navType = 1;
      } else {
        $("#select-nav")
          .find(".select-nav-type")
          .hide();
      }
    }
    $("#select-nav")
      .find(".select-nav-type")
      .hide();
  },

  resetData() {
    this.keywordList = "";
    this.mapType = "start";
    this.pointType = "end";
    this.sceneType = "selectOne";
    this.navType = 0;
    this.selectStart = "";
    this.selectEnd = "";
  },

  //默认场景 首页
  showHomeScene() {
    $("body")
      .find(".mapUI")
      .hide();
    $("#search-banner").show();
    this.resetData();
  },

  //搜索场景 搜索
  showSearchScene() {
    $("#search-input")
      .show()
      .find("input")
      .val("")
      .focus();
    this.loadHistoryKeyword();
  },

  //选择目的地后的场景
  showSelectOneScene() {
    $("body")
      .find(".mapUI")
      .hide();
    this.sceneType = "selectOne";
    var obj = this.selectEnd,
      dom = $("#select-location");
    dom.show();
    dom.find(".select-location-left-up").html(obj.name);
    dom.find(".select-location-left-down-one").html(obj.mapname);
    dom.find(".select-location-left-down-two").html(obj.floorname);
  },

  //选择起始场景
  showSelectTwoScene() {
    $("body")
      .find(".mapUI")
      .hide();
    this.sceneType = "selectTwo";
    this.renderSelectTwoInput();
  },

  //导航场景
  showNavScene() {
    $("body")
      .find(".mapUI")
      .hide();
    var obj = this.selectEnd,
      str =
        this.selectEnd.name + this.selectEnd.mapname + this.selectEnd.floorname;
    $("#select-end-point").show();
    $("#select-end-point")
      .find(".select-end-point-text")
      .html(str);
    $("#nav-tip").show();
    $("#nav-tip")
      .find(".nav-tip-text")
      .show();
    $("#nav-tip")
      .find(".nav-tip-img")
      .show();
    $("#nav-tip")
      .find(".nav-tip-over")
      .hide();
  },

  //选点提示场景
  showPointTip(point, floorid, name) {
    console.log("选点", point);
    this.tempPoint = {
      point: point,
      floorid: floorid,
      name: name
    };
    if (this.mapType == "start") {
      $("#nav-dialog-tip").show();
      $("#nav-dialog-tip")
        .find(".nav-dialog-text")
        .html("将此地点设在为起点?");
    } else {
      $("#nav-dialog-tip").show();
      $("#nav-dialog-tip")
        .find(".nav-dialog-text")
        .html("将此地点设在为终点?");
    }
  },

  //导航结束
  showNavOverScene() {
    $("body")
      .find(".mapUI")
      .hide();
    $("#select-nav")
      .find(".nav-tip-text")
      .hide();
    $("#select-nav")
      .find(".nav-tip-img")
      .hide();
    $("#select-nav")
      .find(".nav-tip-over")
      .show();
  },

  tipLeft() {
    console.log("tipLeft");
    $("#nav-tip")
      .find(".nav-tip-text-left")
      .removeClass()
      .addClass("nav-tip-text-left left");
    $("#nav-tip")
      .find(".nav-tip-text-right")
      .find(".nav-tip-text-right-content-down")
      .html("左转");
  },

  tipRight() {
    console.log("tipRight");
    $("#nav-tip")
      .find(".nav-tip-text-left")
      .removeClass()
      .addClass("nav-tip-text-left right");
    $("#nav-tip")
      .find(".nav-tip-text-right")
      .find(".nav-tip-text-right-content-down")
      .html("右转");
  },

  tipZhi(value) {
    console.log("tipZhi");
    $("#nav-tip")
      .find(".nav-tip-text-left")
      .removeClass()
      .addClass("nav-tip-text-left zhi");
    $("#nav-tip")
      .find(".nav-tip-text-right")
      .find(".nav-tip-text-right-content-down")
      .html("直行");
  },

  addressDistance(value) {
    console.log("剩余" + value);
    $("#select-end-point")
      .find(".select-end-point-left-down")
      .html("距离目的地还剩" + value + "米");
  },

  navOver() {
    console.log("导航结束");
    this.showNavOverScene();
  },

  zhenRotate(value) {
    console.log("zhenRotate", value);
    $("#compass-buttom")
      .find(".zhen")
      .css("transform", "rotate(30deg)");
  },

  //渲染起始点赋值
  renderSelectTwoInput() {
    var startObj = this.selectStart,
      endObj = this.selectEnd;
    dom = $("#select-nav");
    dom.show();
    if (startObj.name) {
      dom
        .find(".select-nav-point-input-content-box-up")
        .find(".select-nav-point-input-content-box-left")
        .html(startObj.name);
    } else {
      dom
        .find(".select-nav-point-input-content-box-up")
        .find(".select-nav-point-input-content-box-left")
        .html("");
    }
    if (endObj.name) {
      dom
        .find(".select-nav-point-input-content-box-down")
        .find(".select-nav-point-input-content-box-left")
        .html(endObj.name);
    } else {
      dom
        .find(".select-nav-point-input-content-box-down")
        .find(".select-nav-point-input-content-box-left")
        .html("");
    }
  },

  //切换
  switchStartEnd() {
    var temp = this.selectStart;
    this.selectStart = this.selectEnd;
    this.selectEnd = temp;
    this.renderSelectTwoInput();
  },

  //历史记录装载
  loadHistoryKeyword() {
    /*
    let obj = {
      id: 2270,
      depaid: 100001,
      depaname: "重庆医院演示",
      name: "挂号收费",
      floorid: 1000047,
      floorname: "1F",
      mapid: 10009,
      mapname: "内科楼"
    }
    this.setKeyword(obj);
    */
    var html = "",
      arr = this.getHistoryKeyword();
    if (arr && arr.length) {
      for (var i in arr) {
        html +=
          "<div class='list-item' data-index=" +
          i +
          "><span class='list-item-left'>" +
          arr[i].name +
          "</span><span class='list-item-right'>" +
          arr[i].mapname +
          "-" +
          arr[i].floorname +
          "</span></div>";
      }
    } else {
      html += "<div class='list-item'>暂无搜索</div>";
    }
    $("#search-input")
      .find(".list")
      .html(html);
  },

  getHistoryKeyword() {
    var data = "",
      arr = tools.getLocalObjStore("keywords");
    if (arr) {
      data = arr;
    }
    return data;
  },

  setKeyword(obj) {
    var arr = this.getHistoryKeyword();
    if (!arr) {
      arr = [];
    }
    for (var i in arr) {
      if (arr[i].id == obj.id) {
        arr.splice(i, 1);
      }
    }
    if (arr && arr.length > 50) {
      arr.pop();
    }
    arr.unshift(obj);
    tools.setLocalObjStore("keywords", arr);
  },

  clearKeyword() {
    localStorage.removeItem("keywords");
    this.loadHistoryKeyword();
  },

  getKeywordList(obj) {
    let tthis = this;
    $.ajax({
      type: "POST",
      url: "http://hqn.fun:16812/Rselect/CGetSearchPointList",
      data: obj,
      success: function(data) {
        //console.log(268,data);
        tthis.keywordList = data.data;
        tthis.showKeywordList();
      }
    });
  },

  showKeywordList(list) {
    var html = "",
      arr = this.keywordList;
    if (arr && arr.length) {
      for (var i in arr) {
        html +=
          "<div class='list-item' data-index=" +
          i +
          "><span class='list-item-left'>" +
          arr[i].name +
          "</span><span class='list-item-right'>" +
          arr[i].mapname +
          "-" +
          arr[i].floorname +
          "</span></div>";
      }
    } else {
      html += "<div class='list-item'>暂无搜索</div>";
    }
    $("#search-input")
      .find(".keyword-list")
      .html(html);
  },

  simulateNav() {
    console.log("simulateNav", this.selectStart, this.selectEnd);
    //判断起点，终点
    if (this.selectStart && this.selectEnd) {
      this.showNavScene();
    } else if (this.selectStart == "") {
      alert("请输入起点");
    } else if (this.selectEnd == "") {
      alert("请输入终点");
    }
  },

  timeNav() {
    console.log("timeNav");
    //判断蓝牙，起点，终点
    this.showNavScene();
  }
};
